<template>
    <div class="app-container">
        <el-form size="mini" :inline="true" label-width="68px">

            <el-form-item label="专业">
                <el-select @change="changeMajor" clearable size="mini" v-model="queryParams.majorId">
                    <el-option v-for="(v, i) in major_list" :key="i" :value="v.majorId" :label="v.majorName">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="班级">
                <el-select clearable size="mini" v-model="queryParams.classId" placeholder="请先选择专业再选择班级">
                    <el-option v-for="(v, i) in class_list" :key="i" :value="v.classId" :label="v.className">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="学年">
                <el-select clearable size="mini" v-model="queryParams.stuYearId">
                    <el-option v-for="(v, i) in year_list" :key="i" :value="v.id" :label="v.stuYearName">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="年级">
                <el-select clearable size="mini" v-model="queryParams.gradeId">
                    <el-option v-for="(v, i) in grade_list" :key="i" :value="v.gradeId" :label="v.gradeName">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="学号">
                <el-input v-model="queryParams.stuNo"></el-input>
            </el-form-item>

            <el-form-item label="姓名">
                <el-input v-model="queryParams.stuName"></el-input>
            </el-form-item>

            <el-form-item label="">
                <el-button size="mini" icon="el-icon-search" @click="getList">搜索</el-button>
                <el-button size="mini" icon="el-icon-refresh" @click="doRefresh">刷新</el-button>
                <el-button size="mini" type="success" icon="el-icon-download" @click="exportVClick">导出</el-button>
            </el-form-item>

        </el-form>

        <el-table v-loading="loading" :data="tableData">
            <el-table-column label="学年" align="center" prop="stuYearName" width="120" />
            <el-table-column label="专业" align="center" prop="majorName" width="280" />
            <el-table-column label="班级" align="center" prop="className" width="280" />
            <el-table-column label="学号" align="center" prop="stuNo" width="100" />
            <el-table-column label="学生姓名" align="center" prop="stuName" />
            <el-table-column label="班级排名" align="center" prop="cphClassRank" />
            <el-table-column label="专业排名" align="center" prop="cphMajorRank" />
            <el-table-column label="综合评价总成绩" align="center" prop="cphScore" />
            <el-table-column prop="iamScore" label="思想品德" align="center" width="80" />
            <el-table-column prop="classtwoScore" label="第二课堂" align="center" width="80" />
            <el-table-column prop="ceScore" label="综合评价" align="center" width="80" />
            <el-table-column prop="sportScore" label="体能素质" align="center" width="80" />
            <el-table-column prop="stuScore" label="平均学分绩" align="center" width="80" />
            <el-table-column label="学生状态" align="center">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.srs_stu_status" :value="scope.row.stuStatus" />
                </template>
            </el-table-column>
        </el-table>


        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getList" />

        <el-dialog title="选择导出" :visible.sync="exportV" width="600px" append-to-body>
            <el-form label-width="120px">
                <el-form-item label="学年">
                    <el-select clearable size="mini" v-model="exportForm.stuYearId">
                        <el-option v-for="(v, i) in year_list" :key="i" :value="v.id" :label="v.stuYearName">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="年级">
                    <el-select clearable size="mini" v-model="exportForm.gradeId">
                        <el-option v-for="(v, i) in grade_list" :key="i" :value="v.gradeId" :label="v.gradeName">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="专业">
                    <el-select clearable size="mini" v-model="exportForm.majorId">
                        <el-option v-for="(v, i) in major_list" :key="i" :value="v.majorId" :label="v.majorName">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <el-button size="mini" @click="doExport">导出</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>


    </div>
</template>
<script>
import { listOwnCollegeScore, listOwnMajor, listOwnClass, xwExport } from "@/api/stuCQS/info-fill/cqScore";
import { listAllYear as listYear } from "@/api/stuCQS/basedata/year";
import { listGrade } from "@/api/stuCQS/basedata/grade";


import { isEmpty } from "@/api/helpFunc";
import lodash from "lodash";
import * as XLSX from 'xlsx';
import { workbook2blob, openDownloadDialog } from "@/api/helpFunc";

export default {
    name: "xw-iam",
    dicts: ['srs_stu_status'],
    data() {
        return {
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                majorId: null,
                classId: null,
                stuYearId: null,
                gradeId: null,
                stuName: "",
                stuNo: ""
            },

            major_list: [],
            class_list: [],
            year_list: [],
            grade_list: [],

            loading: false,
            tableData: [],
            total: 0,

            exportV: false,
            exportForm: {

            }

        }
    },
    created() {
        this.getList();
        this.listOwnMajor();
        this.listYear();
        this.listGrade();
    },
    methods: {
        exportVClick() {
            this.exportV = true;
        },
        async doExport() {
            this.loading = true;
            let res = await xwExport(this.exportForm);
            this.loading = false;
            if (res.code == 200) {
                let data = res.data;
                const header = ['1学年', '2学院', '3专业', '4班级', '5学号', '6姓名', '7思想品德', '8体能素质', '9综合评价', '10科学文化素质', '11第二课堂', '12总成绩', '13班级排名', '14专业排名'];
                const header_zh = {
                    '1学年': '1学年',
                    '2学院': '2学院',
                    '3专业': '3专业',
                    '4班级': '4班级',
                    '5学号': '5学号',
                    '6姓名': '6姓名',
                    '7思想品德': '7思想品德',
                    '8体能素质': '8体能素质',
                    '9综合评价': '9综合评价',
                    '10科学文化素质': '10科学文化素质',
                    '11第二课堂': '11第二课堂',
                    '12总成绩': '12总成绩',
                    '13班级排名': '13班级排名',
                    '14专业排名': '14专业排名',
                };

                const arrayWithHeader = [header_zh, ...data];
                console.log(data);
                // let sheet2data = []; // 第二个sheet工作簿
                // 转换sheet格式
                var sheet1 = XLSX.utils.json_to_sheet(arrayWithHeader,
                    {
                        header: header,
                        skipHeader: true
                    });
                sheet1["!cols"] = [
                    { wch: 15 },
                    { wch: 20 },
                    { wch: 20 },
                    { wch: 25 },
                    { wch: 12 },
                    { wch: 12 },
                    { wch: 12 },
                    { wch: 12 },
                    { wch: 12 },
                    { wch: 12 },
                    { wch: 12 },
                    { wch: 12 },
                    { wch: 12 },
                    { wch: 12 }
                ];

                // 创建一个新的空的workbook      
                var wb = XLSX.utils.book_new();
                // 为每一个工作簿设置名称并添加到workbook（excel表）中
                XLSX.utils.book_append_sheet(wb, sheet1, "综合成绩");
                const workbookBlob = workbook2blob(wb);  // 辅助函数workbook2blob
                // 下载文档并添加文件名称
                openDownloadDialog(workbookBlob, "综合成绩.xlsx");  // 辅助函数openDownloadDialog

            }
        },
        async getList() {
            this.loading = true;
            let res = await listOwnCollegeScore(this.queryParams);
            this.loading = false;

            if (res.code == 200) {
                this.tableData = lodash.cloneDeep(res.rows);
                this.total = res.total;
            }
        },
        async doRefresh() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                majorId: null,
                classId: null,
                stuYearId: null,
                gradeId: null,
                stuName: "",
                stuNo: ""
            };
            await this.getList();
        },
        async listOwnMajor() {
            let res = await listOwnMajor();
            if (res.code == 200) {
                this.major_list = lodash.cloneDeep(res.data);
            }
        },
        async changeMajor(major) {
            console.log(major)
            if (isEmpty(major)) {
                this.class_list = [];
                this.queryParams.classId = null;
            } else {
                let res = await listOwnClass(major);
                if (res.code == 200) {
                    this.class_list = lodash.cloneDeep(res.data);
                }
            }
        },
        async listYear() {
            let res = await listYear();
            if (res.code == 200) {
                this.year_list = lodash.cloneDeep(res.data);
            }
        },
        async listGrade() {
            let res = await listGrade();
            if (res.code == 200) {
                this.grade_list = lodash.cloneDeep(res.rows);
            }
        }
    }
}
</script>